<template>
  <ul class="side-menu">
    <li v-for="(item,index) in sideMenu" :key="'sideMenu'+index"
        :class="{'group-title':item.level===-1,'big-title':item.level===2}">
      <a :href="item.href" v-if="item.level === 1"> {{ item.title }} </a>
      <p v-else> {{ item.title }} </p>
    </li>
  </ul>
</template>

<script>
import {sideMenu} from "@/data/home";

export default {
  name: "sideMenu",
  data(){
    return{
      sideMenu
    }
  }
}
</script>

<style scoped>
.side-menu{
  height: 77vh;
  width: 240px;
  /*background-color: #fff0cf;*/
  padding: 40px 0;
  overflow: scroll;
}
.side-menu li{
  box-sizing: border-box;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
}
.hover-color{
  color: #409eff;
}
.group-title{
  font-size: 12px!important;
  color: #999;
}
.big-title{
  font-size: 16px!important;
  color: #333;
  font-weight: 700;
}
</style>